<template>
  <div class="main-body">
    <Header />
    <div class="box-nav">
      <van-icon name="arrow-left" size="0.5rem" />
      <span>注册</span>
    </div>

    <div class="login-body">
      <div class="text">激活成为会员即可领取¥50代金券</div>

      <van-cell is-link @click="showPicker = true">
        <div class="country-icon">
          <img src="../assets/img/country.png" alt="" />
        </div>
        <div class="txt">{{ value }}</div>
        <van-icon name="arrow-down" class="van-cell__right" />
      </van-cell>
      <van-popup
        v-model="showPicker"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>

      <div class="phone-box">
        <div class="item-fix">+86</div>
        <input
          type="tel"
          placeholder="请输入手机号"
          maxlength="11"
          class="txt"
          v-model="userInfo.phone"
        />
        <div class="send-box" @click="handleVerify">{{ Verify }}</div>
      </div>

      <div class="msg-box">
        <img src="../assets/img/message.png" alt="" class="item-fix" />
        <input
          ref="yz"
          type="text"
          placeholder="请输入短信验证码"
          maxlength="20"
          class="txt"
          value=""
        />
      </div>
      <div class="password-box">
        <img src="../assets/img/key.png" alt="" class="item-fix" />
        <input
          type="password"
          placeholder="请输入密码"
          maxlength="20"
          class="txt"
          v-model="userInfo.pass"
        />
        <div
          class="item-see"
          :class="isclose ? 'close' : ''"
          @click="handlesee"
        >
          <img src="../assets/img/eye.png" alt="" />
        </div>
      </div>

      <div class="div-status">
        <van-checkbox
          v-model="checked"
          shape="square"
          icon-size="0.3rem"
        ></van-checkbox>
        <p>
          我已仔细阅读、理解并同意诺誓<span class="link-policy">会员政策</span>
        </p>
      </div>
      <div class="div-btn" @click="handleReg">注册</div>
      <div class="div-other-btn">
        <router-link to="/login">已有账号登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import Header from "../components/Header.vue";
import { mapState } from "vuex";
import { userReg } from "../api/user";
import { userRegCheck } from "../api/user";
export default {
  components: {
    Header,
  },
  data() {
    return {
      checked: false,
      isclose: false,
      value: "中国",
      showPicker: false,
      columns: [
        "澳大利亚",
        "韩国",
        "加拿大",
        "马来西亚",
        "美国",
        "日本",
        "新加坡",
        "英国",
        "中国",
        "中国香港",
        "中国澳门",
        "中国台湾",
      ],
      Verify: "发送验证码",
      userInfo: {
        phone: "",
        pass: "",
      },
    };
  },
  computed: {
    ...mapState({
      userInfoList: (state) => state.user.userInfo,
    }),
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    handlesee() {
      this.isclose = !this.isclose;
    },
    handleVerify() {
      //生成随机验证码
      let arr = [];
      for (var i = 48; i <= 52; i++) {
        arr.push(String.fromCharCode(i));
      }
      for (var i = 65; i <= 90; i++) {
        arr.push(String.fromCharCode(i));
      }
      for (var i = 97; i <= 122; i++) {
        arr.push(String.fromCharCode(i));
      }
      let verify = "";
      while (verify.length < 4) {
        let r = parseInt(Math.random() * arr.length);
        if (verify.indexOf(arr[r] == -1)) {
          verify += arr[r];
        }
      }
      this.Verify = verify;
    },
    handleReg() {
      //注册且判断是否用户是否注册过
      let { phone, pass } = this.userInfo;
      if (this.checked) {
        if (this.$refs.yz.value.toUpperCase() == this.Verify.toUpperCase()) {
          userRegCheck(this.userInfo).then((res) => {
            let userInfoList = res.data;
            for (let i = 0; i < userInfoList.length; i++) {
              console.log(userInfoList[i])
              if (phone != "" && pass != "") {
                if (phone == userInfoList[i].phone) {
                  Toast.fail({
                    message: "用户已存在",
                    position: "top",
                  });
                  history.go(0)
                  // return
                  break
                }else {
                  userReg(this.userInfo).then((res) => {
                    // console.log(res)
                    if (res.status == 201) {
                      Toast.success({
                        message: "注册成功",
                        position: "top",
                      });
                    }
                  });
                  this.$router.push('/login')
                  // return;
                  break
                }
              } else {
                Toast.fail({
                  message: "用户名或密码不能为空",
                  position: "top",
                });
              }
            }
          });
          // for (let i = 0; i < this.userInfoList.length; i++) {
          //   if (userphone != "" && password != "") {
          //     if (userphone == this.userInfoList[i].phone) {
          //       Toast.fail({
          //         message: "用户已存在",
          //         position: "top",
          //       });
          //       return;
          //     } else {
          //       userReg(this.userInfo).then((res) => {
          //         // console.log(res)
          //         if (res.status == 201) {
          //           Toast.success({
          //             message: "注册成功",
          //             position: "top",
          //           });
          //         }
          //       });
          //       return
          //     }
          //   } else {
          //     Toast.fail({
          //       message: "用户名或密码不能为空",
          //       position: "top",
          //     });
          //   }
          // }
        } else {
          Toast.fail({
            message: "验证码错误",
            position: "top",
          });
        }
      } else {
        Toast.fail({
          message: "请勾选协议",
          position: "top",
        });
      }

      // if (this.checked) {
      //   if (this.$refs.yz.value.toUpperCase() == this.Verify.toUpperCase()) {
      //     userRegCheck(this.userInfo).then((res) => {
      //       let userInfoList = res.data;
      //       if (phone != "" && pass != "") {
      //         for (let i = 0; i < userInfoList.length; i++) {
      //           console.log(userInfoList[i]);
      //           if (phone == userInfoList[i].phone) {
      //             Toast.fail({
      //               message: "用户已存在",
      //               position: "top",
      //             });
      //             // history.go(0)
      //             // return
      //           } else {
      //             userReg(this.userInfo).then((res) => {
      //               console.log(this.userInfo);
      //               console.log(res);
      //               if (res.status == 201) {
      //                 Toast.success({
      //                   message: "注册成功",
      //                   position: "top",
      //                 });
      //               }
      //             });
      //             // this.$router.push('/login')
      //             // return;
      //             // break;
      //           }
      //         }
      //       } else {
      //         Toast.fail({
      //           message: "用户名或密码不能为空",
      //           position: "top",
      //         });
      //       }
      //     });
      //     // for (let i = 0; i < this.userInfoList.length; i++) {
      //     //   if (userphone != "" && password != "") {
      //     //     if (userphone == this.userInfoList[i].phone) {
      //     //       Toast.fail({
      //     //         message: "用户已存在",
      //     //         position: "top",
      //     //       });
      //     //       return;
      //     //     } else {
      //     //       userReg(this.userInfo).then((res) => {
      //     //         // console.log(res)
      //     //         if (res.status == 201) {
      //     //           Toast.success({
      //     //             message: "注册成功",
      //     //             position: "top",
      //     //           });
      //     //         }
      //     //       });
      //     //       return
      //     //     }
      //     //   } else {
      //     //     Toast.fail({
      //     //       message: "用户名或密码不能为空",
      //     //       position: "top",
      //     //     });
      //     //   }
      //     // }
      //   } else {
      //     Toast.fail({
      //       message: "验证码错误",
      //       position: "top",
      //     });
      //   }
      // } else {
      //   Toast.fail({
      //     message: "请勾选协议",
      //     position: "top",
      //   });
      // }
    },
  },
};
</script>

<style src='../assets/css/reg.css' scoped>
</style>
<style lang="less" scoped>
/deep/.van-picker__toolbar {
  width: 100%;
  height: 1.04rem;
  line-height: 1.04rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.36rem;
}
/deep/.van-picker__cancel {
  text-align: center;
  background-color: #f1f1f1;
  flex: 1;
}
/deep/.van-picker__confirm {
  color: #fff;
  text-align: center;
  background-color: #414141;
  flex: 1;
}
</style>